<template>
	<view>
		<view class="tui-modal-class tui-modal-box" 
			:style="show? 'z-index: 99998;':'z-index: -1;' " 
			:class="[show?'tui-modal-show':'']">
			<slot></slot>
		</view>
		<view 
			:style="show? 'z-index: 99996;':'z-index: -2;' " 
			class="tui-modal-mask" 
			:class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
	</view>
</template>

<script>
	export default {
		name: "tuiModal",
		props: {
			//是否显示
			show: {
				type: Boolean,
				default: false
			},
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleClickCancel() {
				if (!this.maskClosable) return;
				this.$emit('cancel');
			},
			px(num) {
				return uni.upx2px(num) + 'px'
			}
		}
	}
</script>

<style>
	.tui-modal-box {
		position: fixed;
		width: 84%;
		left: 50%;
		top: 42%;
		margin: auto;
		background: #fff;
		transition: all 0.3s ease-in-out;
		transform: translate(-50%, -50%) scale(.8);
		opacity: 0;
		border-radius: 12upx;
		box-sizing: border-box;
		padding: 40upx 60upx;
	}

	.tui-modal-show {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	.tui-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		visibility: visible;
		opacity: 1;
	}

</style>
